<template>
	<view class="main-bg-color flex  flex-align-items justify-content search-top" style="height: 80rpx;">
		<view class="flex" style="width: 96%; height: 60rpx; background-color: #FFFFFF; border-radius: 50rpx;">
			<input class="top-input" type="text" value="" placeholder="搜索" />
			<view class="btn" ></view>
		</view>
	</view>
</template>

<script>
</script>

<style>
	.search-top{
		position: fixed;
		width: 100%;
		z-index: 999;
	}	
	.top-input{
		width: 90%; //设置90%宽度，后面的让搜索按钮占用
		height: 100%;
		padding-left: 30rpx;
		font-size: 30rpx;
		color: #9C9C9C;
	}
	.btn{
		flex: 1;//设置1表示除了其它有固定宽度的之外，自己独占剩余部分的1分，若有2个元素则每个占1/2，若只有一个元素则该元素占剩余部分的100%
		height: 100%; 
		background-color: #FFFFFF;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 30rpx;
	}
	.btn:before{
		font-family: "iconfont" !important; //一定要设置font-family：“iconfont”不然字体无法出来
		content: "\e6e3"; //要是用Unicode格式，原生的是&#xe6e3而我们在content要把前面的&#x去掉，并加上一个\即可
		color: #CCCCCC;
	}
</style>
